<template>
    <div>
        <el-dialog :title="isAdd ? '添加商品规格' : '编辑商品规格'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="specsForm" :rules="rules" :before-close="cancel" ref="specsRef">
                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="specsname">
                    <el-input v-model="specsForm.specsname" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 动态表单添加 -->
                <el-form-item label="规格属性" :label-width="formLabelWidth" v-for="(item, index) in attrList">
                    <el-input v-model="item.value" autocomplete="off" class="ipt"></el-input>
                    <el-button v-if="index == 0" @click="addAttr" type="primary">新增规格属性</el-button>
                    <el-button v-else class="btn" @click="delSpecs(index)">删除</el-button>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="specsForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { specsAdd, specsInfo, specsEdit } from '../../request/api';
import { mapGetters, mapActions } from 'vuex';
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            attrList: [
                {
                    value: ''//双向数据绑定的值
                }
            ],//规格属性初始数组
            dialogTableVisible: false,
            dialogFormVisible: true,
            specsForm: {
                specsname: '',//商品规格名称string’颜色‘
                attrs: '',//商品规格属性值string"白色,红色，黄色"
                status: 1,//状态1正常2禁用number1
            },
            formLabelWidth: '120px',
            value: 1,
            rules: {
                specsname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                attrs: [
                    { required: true, message: '请输入商品属性', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ]

            }
        }
    },
    methods: {
        ...mapActions({
            getSpecsList: 'specs/getSpecsList',
            getCount:'specs/getCount'
        }),
        // 点击新增规格属性  添加一个属性
        addAttr() {
            if (!this.attrList[0].value) {
                this.$message.success('请填写属性');
                return;
            }
            this.attrList.push({
                value: ''
            })
        },
        // 删除属性
        delSpecs(index) {
            this.attrList.splice(index, 1);
        },
        // 关闭弹窗
        cancel() {
            this.$emit('cancel');
            this.reset();
            this.resetForm();
            this.attrList = [
                {
                    value: ''//双向数据绑定的值
                }
            ]
        },
        // 重置弹窗
        reset() {
            this.specsForm = {
                specsname: '',//商品规格名称string’颜色‘
                attrs: '',//商品规格属性值string"白色,红色，黄色"
                status: 1,//状态1正常2禁用number1
            }
        },
        // 重置表单验证
        resetForm() {
            this.$refs.specsRef.resetFields();
        },
        // 数据回显
        lookup(id) {
            console.log(id, '回显');
            specsInfo({ id }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.specsForm = res.list[0];
                    this.specsForm.attrs.map((item, index) => {
                        // 如果下标为0就赋值
                        if (index == 0) {
                            this.attrList[0].value = item
                        } else {
                            // 否则就追加
                            this.attrList.push({
                                value: item
                            })
                        }
                    })
                }
            })

        },
        // 点击添加 
        add() {
            this.$refs.specsRef.validate(value => {
                // 转化属性格式  后端需要的格式是字符串
                let attrs = this.attrList.map(item => {
                    return item.value
                })
                // 赋值给表单
                this.specsForm.attrs = attrs.join(',');
                if (!this.specsForm.attrs) {
                    this.$message.success('请填写属性');
                    return;
                }
                if (value) {
                    console.log(value);
                    if (this.isAdd) {
                        console.log('添加');
                        // 添加
                        specsAdd(this.specsForm).then(res => {
                            if (res.code == 200) {
                                // 添加成功
                                this.$message.success(res.msg);
                                // 重新渲染视图
                                this.getSpecsList();
                                // 清空内容
                                this.cancel();
                                // 重新获取总条数
                                this.getCount();
                            }else{
                                // 添加失败
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        specsEdit(this.specsForm).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                // 修改成功
                                this.$message.success(res.msg);
                                // 关闭弹窗
                                this.cancel();
                                // 重新渲染
                                this.getSpecsList();
                            } else {
                                // 修改失败
                                this.$message.error(res.msg);
                            }
                        })
                    }
                }
            })
        }
    },
    mounted() { },
    watch: {},
    computed: {
        ...mapGetters({
            specsList: 'specs/specs_list',
            size: 'specs/size',
            count: 'specs/count'
        })
    },
    filters: {},
    components: {},
}
</script>
<style scoped>
.ipt {
    width: 60%;
    margin-right: 10px;
}
</style>